<template>
  <div class="shopFiles">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form
          ref="shopFilesForm"
          :model="formData"
          :rules="formRules"
          label-width="90px"
        >
          <el-form-item prop="disCode" label="经销商">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/dealer/page"
              placeholder="请输入经销商"
              lable-name="name"
              value-name="code"
              custom-name="name"
              :params="{query:{name: formData.disName}, type:1}"
              :value.sync="formData.disCode"
              :lable.sync="formData.disName"
              :current-id.sync="formData.disId"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="storeCode" label="门店">
            <SearchSelectPicker
              :url="'/call-center/api/v1/mscInfo/shop/list/' + formData.disId"
              placeholder="请选择"
              lable-name="name"
              value-name="code"
              method="get"
              :must-pid="true"
              :parent-id="formData.disId"
              :value.sync="formData.storeCode"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="postCode" label="岗位">
            <el-select v-model="formData.postCode" clearable placeholder="请选择岗位">
              <el-option
                v-for="(list, index) in postCodeOption"
                :key="index"
                :value="list.dictCode"
                :label="list.dictName"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="isOnline" label="是否在职">
            <el-select v-model="formData.isOnline" clearable placeholder="请选择是否在职">
              <el-option :value="1" label="是" />
              <el-option :value="0" label="否" />
            </el-select>
          </el-form-item>
          <el-form-item prop="staffName" label="员工姓名">
            <el-input v-model="formData.staffName" clearable placeholder="请输入员工姓名" />
          </el-form-item>
          <el-form-item prop="phone" label="联系电话">
            <el-input v-model="formData.phone" clearable placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item align="left">
            <Button @click="resetClick('shopFilesForm')">重置</Button>
            <Button type="primary" enter @click="searchClick('shopFilesForm')">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div class="table-list-box">
        <el-table
          v-loading="isLoading"
          border
          height="400"
          highlight-current-row
          header-row-class-name="table-list-header"
          tooltip-effect="dark"
          style="width: 100%"
          :data="dataList"
        >
          <el-table-column prop="distName" label="经销商" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="storeName" label="门店" align="center" widt="200" :show-overflow-tooltip="true" />
          <el-table-column prop="postName" label="岗位" align="center" />
          <el-table-column prop="isOnline" label="是否在职" align="center" width="80">
            <template slot-scope="scope">{{ scope.row.isOnline === 1 ? '是' : scope.row.isOnline === 0 ? '否' : '--' }}</template>
          </el-table-column>
          <el-table-column prop="staffName" label="员工姓名" align="center" width="120" />
          <el-table-column prop="phone" label="联系电话" align="center" width="150" />
        </el-table>
      </div>
      <CustomPagination
        :total="total"
        :page="formData.page"
        :limit="formData.rows"
        @pagination="paginationChange"
        @on-total="onlyCountFlag"
      ></CustomPagination>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import CustomPagination from '@/components/CustomPagination'
import { getTopInfoStaff } from '@/api/topInfo'
import { getDictByType } from '@/api/dataDict'
export default {
  name: 'InfoDataShopFiles',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    SearchSelectPicker,
    CustomPagination
  },
  data() {
    return {
      postCodeOption: [],
      isLoading: false,
      dataList: [],
      formData: {
        disId: '',
        disCode: '', // 经销商
        disName: '',
        storeCode: '', // 门店
        postCode: '', // 岗位
        isOnline: '', // 是否在职
        staffName: '', // 员工姓名
        phone: '', // 联系电话
        page: 1,
        rows: 10
      },
      total: 0,
      formRules: {
        disCode: [
          { required: true, message: '经销商不能为空', trigger: 'blur' }
        ],
        phone: { pattern: /^1\d{10}$/, message: '请输入正确的联系电话', trigger: 'change' }
      }
    }
  },
  created() {
  },
  mounted() {
    this.getPostCodeOption()
  },
  methods: {
    // 获取岗位信息
    getPostCodeOption() {
      const dictTypeCode = 'POST_CODE'
      const appCode = 'call-center'
      const domainCode = 'marketing'
      const parmas = {
        dictTypeCode,
        appCode,
        domainCode
      }
      getDictByType(parmas).then(res => {
        const data = res.data || []
        if (Array.isArray(data)) {
          this.postCodeOption = data
        }
      })
    },
    /**
     * 提交查询
     */
    searchClick(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.formData.page = 1
          _this.searchTopStaffInfo()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetClick(formName) {
      this.$refs[formName].resetFields()
    },
    searchTopStaffInfo() {
      const _this = this
      const params = { ..._this.formData }
      Object.keys(params).forEach(key => {
        if (params[key] === '') delete params[key]
      })
      delete params.disId
      delete params.disName
      _this.isLoading = true
      getTopInfoStaff(params).then(res => {
        if (res.success === 1) {
          const { total, records, page } = res.data
          _this.$nextTick(() => {
            _this.formData.page = page
            _this.$set(_this, 'total', total)
            _this.dataList = records
            _this.isLoading = false
          })
        } else {
          _this.formData.page = 1
          _this.total = 0
          _this.dataList = []
          _this.isLoading = false
        }
      }, () => { _this.isLoading = false })
    },
    /**
     * 选择每页多少条
     */
    handleSizeChange(pageSize) {
      this.$set(this.formData, 'page', 1)
      this.$set(this.formData, 'rows', pageSize)
      this.$nextTick(() => {
        this.searchTopStaffInfo()
      })
    },
    /**
     * 分页
     */
    handleCurrentChange(currrentPage) {
      this.$set(this.formData, 'page', currrentPage)
      this.$nextTick(() => {
        this.searchTopStaffInfo()
      })
    },
    // 分页返回相应请求参数
    paginationChange(paramsObj) {
      this.$set(this.formData, 'rows', paramsObj.rows)
      this.$set(this.formData, 'page', paramsObj.page)
      this.$nextTick(() => {
        this.searchTopStaffInfo()
      })
    },
    onlyCountFlag(paramsObj) {
      // this.$set(this.formData, 'rows', paramsObj.rows)
      // this.$set(this.formData, 'page', paramsObj.page)
      // this.$nextTick(() => {
      //   this.searchTopStaffInfo()
      // })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
